<template>
  <div v-loading="loading">
    <el-table
      v-if="orderList.items.length > 0"
      :data="orderList.items"
      height="325"
      class="fb-table settle-table-info-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="订单编号" width="190">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.orderId" :open-delay="800" class="item" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.orderId }}</div>
            <div class="overflow" style="cursor:pointer;color:#406EFF" @click="goDetail(scope.row)">{{ scope.row.orderId || '--' }}</div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单日期" width="130">
        <template slot-scope="scope">
          <div v-if="scope.row.orderTime">
            {{ scope.row.orderTime| format('YYYY/MM/DD') }}
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="账号" min-width="100">
        <template slot-scope="scope">
          <!-- <resource-info
            v-if="scope.row.orderType !== 6"
            :resource-name="scope.row.resourceName"
            :account-name-organization="scope.row.accountNameOrganization"
            :account-name-platform="scope.row.accountNamePlatform"
            :resource-id="scope.row.orderInfo.resourceCode"
            account-belong-name="none"
          /> -->
          <div v-if="scope.row.orderType !== 6">
            <ToolTip :content="scope.row.resourceName" />
          </div>
          <span v-else>包含多个账号</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单平台" min-width="100">
        <template slot-scope="scope">
          <div class="flex-center" style="color: #999">
            <platformIcon :data="scope.row.orderPlatform" />
            {{ scope.row.orderPlatform || '--' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="品牌名称" min-width="100">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.theme && scope.row.theme.length > 5" :content="scope.row.theme" />
          <div v-else class="ellipsisOne">{{ scope.row.theme || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="文案内容" min-width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.content" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单链接" min-width="100">
        <template slot-scope="scope">
          <a v-if="isLink(scope.row.orderLink)" :href="scope.row.orderLink" style="color: #406EFF;display:flex;align-items:center;cursor: pointer;" target="_blank"><i class="el-icon-link" />链接</a>
          <ToolTip v-else :content="scope.row.orderLink" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="客户名称" min-width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.clientName" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="含税金额" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.taxAmount || scope.row.taxAmount === 0">{{ (scope.row.taxAmount / 100) | moneyFilter }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="left" label="联系人" min-width="120">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.contactPerson" :open-delay="800" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.contactPerson }}</div>
            <div class="ellipsisOne">{{ scope.row.contactPerson }}</div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column> -->
      <el-table-column align="left" label="销售" min-width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.market" />
        </template>
      </el-table-column>
    </el-table>
    <empty-placeholder
      v-else-if="!loading"
      :text="`<div style='text-align:center;'>暂无订单案例</div>`"
      margin-bottom="-35px"
      danger-html-render
      style="position: relative;top:0px;" />
  </div>
</template>
<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import platformIcon from '@/components/Common/platformIcon';
import ResourceInfo from '@/components/ResourceInfo';
import { moneyFilter } from '@/filters/number';
import { format } from '@/filters/date';
export default {
  filters: {
    moneyFilter,
    format
  },
  components: { ResourceInfo, platformIcon, EmptyPlaceholder },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    orderList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      allChecked: false
    };
  },
  methods: {
    isLink(data) {
      const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)([A-Za-z0-9-~]+)/;
      if (reg.test(data)) {
        return true;
      }
      return false;
    },
    goDetail({ id, orderOrigin }) {
      let params = { name: 'orderDetail', params: { orderId: id }};
      if (orderOrigin) { // 项目渠道单订单跳转
        params = { name: 'projectChildDetail', params: { id }};
      }
      const routeUrl = this.$router.resolve(params);
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>

.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .order-type {
    width:56px;
    height:20px;
    font-size: 12px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
.content {
  ::v-deep {
    .el-loading-parent--relative {
      height: 200px;
    }
  }
}
</style>
